import React, { ReactChild, Fragment, useEffect } from 'react'
import { TabBar } from 'antd-mobile';
// @ts-ignore
import Styles from './index.scss'
// @ts-ignore
import HomeIcon from '../../../icons/home.svg'
// @ts-ignore
import ResumeIcon from '../../../icons/resume.svg'
// @ts-ignore
import SectionIcon from '../../../icons/section-item.svg'
// @ts-ignore
import ToolIcon from '../../../icons/tool.svg'
// @ts-ignore
import SetIcon from '../../../icons/set.svg'
import Router from 'next/router'

export type TabBarType = 'home' | 'me' | 'conclusion' | 'tool' | 'set'

interface PropsInterface {
  // 是否隐藏
  hidden: boolean
  // 索引
  tabBarIndex: TabBarType
  // 子元素
  children?: ReactChild
}

const WTabBar = (props: PropsInterface) => {

  useEffect(() => {
    Router.prefetch(`/`)
    Router.prefetch(`/me`)
    Router.prefetch(`/conclusion`)
    Router.prefetch(`/tool`)
    Router.prefetch(`/set`)
  }, [])

  const itemClick = (path: string) => {
    Router.push(path)
  }

  return (
    <Fragment>
      <div className={ Styles['tab-bar-content'] }>
        {props.children}
      </div>
      <div className={Styles['tab-bar']}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={props.hidden}
        >
          <TabBar.Item
            title="主页"
            key="home"
            selected={props.tabBarIndex === 'home'}
            onPress={() => itemClick('/')}
            icon={<HomeIcon width="20" height="20" fill="#949494" />}
            selectedIcon={<HomeIcon width="20" height="20" fill="#33A3F4" />}
            data-seed="logId"
          />
          <TabBar.Item
            title="我"
            key="me"
            onPress={() => itemClick('/me')}
            selected={props.tabBarIndex === 'me'}
            icon={<ResumeIcon width="20" height="20" fill="#949494" />}
            selectedIcon={<ResumeIcon width="20" height="20" fill="#33A3F4" />}
          />
          <TabBar.Item
            title="总结"
            key="conclusion"
            onPress={() => itemClick('/conclusion')}
            selected={props.tabBarIndex === 'conclusion'}
            icon={<SectionIcon width="20" height="20" fill="#949494" />}
            selectedIcon={<SectionIcon width="20" height="20" fill="#33A3F4" />}
          />
          <TabBar.Item
            title="工具"
            key="tool"
            onPress={() => itemClick('/tool')}
            selected={props.tabBarIndex === 'tool'}
            icon={<ToolIcon width="20" height="20" fill="#949494" />}
            selectedIcon={<ToolIcon width="20" height="20" fill="#33A3F4" />}
          />
          <TabBar.Item
            title="设置"
            key="set"
            onPress={() => itemClick('/set')}
            selected={props.tabBarIndex === 'set'}
            icon={<SetIcon width="20" height="20" fill="#949494" />}
            selectedIcon={<SetIcon width="20" height="20" fill="#33A3F4" />}
          />
        </TabBar>
      </div>
    </Fragment>
  )
}

WTabBar.defaultProps = {
  hidden: false,
  tabBarIndex: 'home'
};

export default WTabBar